<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>贪吃蛇</title>
    <script type="text/javascript">

        var map;
        var snake;
        var food;
        var timer;
        var sum;
        var v;//速度
        var figure;

        function Map(){
            this.width=800;             // 宽度
            this.height=400;            // 高度
            this.position='absolute';
            this.img='../snake/a.jpg';    // 定位方式
            this._map=null;              // 用于保存地图dom元素
            this._map1=null;
            this.show=function(){
                this._map=document.createElement('div');
                this._map.style.width=this.width+'px';
                this._map.style.height=this.height+'px';
                this._map1=document.createElement('img');
                this._map1.src=this.img;
                this._map.style.position=this.position;
                this._map1.style.position=this.position;
                document.getElementsByTagName('body')[0].appendChild(this._map);
                document.getElementsByTagName('div')[0].appendChild(this._map1);
            }

        }

        function Food(){
            this.width=20;              // 宽度
            this.height=20;             // 高度
 //           this.color='green';        
            this.position='absolute';   // 定位方式
            this.x=0;                   // 横坐标
            this.y=0;                   // 纵坐标
            this._food=null;            // 保存之前创建的食物div
            this.img='../snake/b.png'; 
            this._food1=null;
            this.show=function(){
                if(this._food==null){
                    this._food=document.createElement('div');
                    this._food.style.width=this.width+'px';
                    this._food.style.height=this.height+'px';
                  //  this._food.style.background=this.color;
                    this._food1=document.createElement('img');
                    this._food1.src=this.img;
                    this._food.style.position=this.position;
                    this._food1.style.position=this.position;
                  //  this._food1.style.border-radius=20%;
                    map._map.appendChild(this._food);
                    this._food.appendChild(this._food1);
                }
                // 产生随机数确定坐标0--39，0--19
                this.x=Math.floor(Math.random()*40);
                this.y=Math.floor(Math.random()*20);

                // 设置食物位置
                this._food.style.left=(this.x*20)+'px';
                this._food.style.top=(this.y*20)+'px';
            }
        }

        function Snack(){
            this.width=20;              // 宽度
            this.height=20;             // 高度
            this.position='absolute';   // 定位方式
            this.direct='right';        // 移动方式
            //this.radius='50';
            // 所有蛇节的信息
            this.body=[
               // [7,3,'red',null],
               // [6,3,'blue',null],
               // [5,3,'blue',null],
               // [4,3,'blue',null],
               // [3,3,'blue',null],
                [2,3,'black',null],
                [1,3,'green',null]
            ];

            this.setDirect=function(code){
                switch(code){
                    case 37:
                        if(this.direct!='right'){
                            this.direct='left';
                        }
                        break;
                    case 38:
                        if(this.direct!='down'){
                            this.direct='up';
                        }
                        break;
                    case 39:
                        if(this.direct!='left'){
                            this.direct='right';
                        }
                        break;
                    case 40:
                        if(this.direct!='up'){
                            this.direct='down';
                        }
                        break;
                }
            }
            // this.x=0;                   // 横坐标
            // this.y=0;                   // 纵坐标
            this.show=function(){
                for(var i=0;i<this.body.length;i++){
                    if(this.body[i][3]==null){
                        this.body[i][3]=document.createElement('div');
                        this.body[i][3].style.width=this.width+'px';
                        this.body[i][3].style.height=this.height+'px';
                        this.body[i][3].style.position=this.position;
                        this.body[i][3].style.backgroundColor=this.body[i][2];
                        map._map.appendChild(this.body[i][3]);
                    }
                    // 如果不是第一次执行，那么只执行下面两句
                    this.body[i][3].style.left=(this.body[i][0]*20)+'px';
                    this.body[i][3].style.top=(this.body[i][1]*20)+'px';
                    //this.body[i][3].style.border-radius=this.radius+'px';
                }
            }

            this.move=function(){
                var length=this.body.length;
                // 除了蛇头所有坐标都向前移动
                for(var i=length-1;i>0;i--){
                    // 设置后面蛇节的坐标等与前面蛇节的坐标
                    this.body[i][0]=this.body[i-1][0];
                    this.body[i][1]=this.body[i-1][1];
                }
                // 判断蛇头，看其移动方向
                switch(this.direct){
                    case 'left':
                        this.body[0][0]-=1;
                        break;
                    case 'right':
                        this.body[0][0]+=1;
                        break;
                    case 'up':
                        this.body[0][1]-=1;
                        break;
                    case 'down':
                        this.body[0][1]+=1;
                        break;  
                }

                // 判断吃到食物
                if(this.body[0][0]==food.x&&this.body[0][1]==food.y){
                    // 添加一个新蛇节，最后一个蛇节是前面一个蛇节
                    var length=this.body.length-1;
                    var x=this.body[length][0];
                    var y=this.body[length][1];
                    this.body.push([x,y,'green',null]);
                    sum+=1;
                    var m=document.getElementById('score')
                    m.innerText='共'+sum+'分';
                    if(sum%5==0&&v>=50){
                        v-=30;
                        clearTimeout(timer);
                        timer=setInterval('snake.move()',v);
                    }
                    food.show();

                }

                // 判断撞墙死-右
                if(this.body[0][0]>=40 || this.body[0][0]<=-1 || this.body[0][1]<=-1 || this.body[0][1]>=20){
                    clearTimeout(timer);
                    alert('GAME OVER ! scort='+sum+'分');
                    figure=0;
                    return;
                }

                // 判断吃到自己死
                for(var i=this.body.length-1;i>0;i--){
                    if(this.body[0][0]==this.body[i][0] && this.body[0][1]==this.body[i][1]){
                        alert('GAME OVER! scort='+sum+'分');
                        clearTimeout(timer);
                        figure=0;
                        return;
                    }
                }
                //控制暂停
                
                // 吃到自己
                
                this.show();
            }
        }

        window.onload=function(){
            // 实例化地图对象
            // 将地图对象添加到body元素
            figure=0;
            map=new Map();
            map.show();

            // 实例化食物对象
            // 将食物放在地图中
            food=new Food();
            food.show();
            v=500;

            // 实例化蛇对象
            // 将蛇对象放在地图中
            snake=new Snack();
            snake.show();
             // 初始化分数
            sum=0;
            timer=setInterval('snake.move()',v);

            document.onkeyup=function(event){
                var code;
                if(window.event){
                    code=window.event.keyCode;
                }else{
                    code=event.keyCode;
                }
                snake.setDirect(code);
            }

            var pause=document.getElementById('pause');
            pause.onclick=function(){
                    clearTimeout(timer);
            }
            var start=document.getElementById('start');
            start.onclick=function(){
                if(figure==0)
                timer=setInterval('snake.move()',v);
            }

           
        }
    </script>
</head>
<body>
<p id="score" style="margin:auto;">共0分</p>
<input type="submit" name="" value="pause" id="pause">
<input type="submit" name="" value="continue" id="start">    
</body>
</html>